<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="wap-font-scale" content="no" />
    <title>教程</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css" />
    <link rel="stylesheet" type="text/css" href="/css/course.css" />
    <!--    <link rel="stylesheet" type="text/css" href="footer.css">-->
    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/js/iscroll.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/template-native.js"></script>
    <script type="text/javascript" src="/hakka/index.js"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="/js/FileSaver.js"></script>
    <!--     加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <!--    <%--    引入Bootstrap的CSS资源--%>-->
    <link href="/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".menu_box li:eq(7)").addClass("choose_menu");
            $(".mobile_menu_title").text("客家博物馆");
        });
    </script>

</head>
<style>
    .main {
        position: relative;
        /* background-color: burlywood; */
        height: 45vh;
    }

    h1 {
        text-align: center;
        color: #858585;
        background-color: white;
        font-size: 15px;
    }

    .select {
        text-align: center;
        /* background-color: blue; */
    }

    #questionAudio {
        margin-top: 10px;
    }

    .btn {
        width: 100px;
        height: 30px;
        margin: 10px 25px;
        border-radius: 20px;

    }

    .answer {
        /* background-color: brown; */
        text-align: center;
        line-height: 100px;
    }

    .contentkkk {
        width: 200px;
        height: 40px;
    }

    #submit {
        width: 100px;
        height: 45px;
    }

    .download {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100px;
        height: 50px;
        font-weight: 900;
        background-color: #858585;
    }

    .tocomment {
        text-align: center;
        line-height: 50px;
        position: absolute;
        right: 0;
        bottom: 60px;
        width: 100px;
        height: 50px;
        font-weight: 900;
        background-color: #858585;
    }

    #footer {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 70px;
        background-color: #eeee;
        z-index: 9999;
        /*background-image: url("static/image/footer/footer.png");*/
        /*background:url(image/footer/footer.png) no-repeat 50% 50%;*/
    }
    .my{
        background-color: #b2b2b2;
    }
</style>
<!-- <script>
        function previous(){
            document.getElementById('previoustAudio').src="../2.mp3";
        }
</script> -->

<body>
<!--页头 开始-->
<div class="head">
    <div class="head_in mtIn">
        <div class="drop_menu_btn"></div>
        <div class="mobile_menu_title"></div>
        <div class="head_left">
            <div class="menu_box">
                <i class="close_menu_box"></i>
                <div class="menu_box_in" id="drop_menu">
                    <ul>
                        <li><a href="/index.html">辞典</a></li>
                        <li><a href="/hakka/tutorial.html">教材</a></li>
                        <li><a href="/hakka/collect.html">词条收集</a></li>
                        <li><a href="/hakka/mandarin_to_hakka.html">客普翻译</a></li>
                        <li><a href="/hellodata">HalaDatab</a></li>
                        <li><a href="/hakka/languageRegion.html" target="_blank">语言地区</a></li>
                        <!--									<li><a href="/hakka/voice.html">语音搜索</a></li>-->
                        <li><a href="/hakka/hot.html">网址导航</a></li>
                        <li><a href="/hakka/museum.html">客家博物馆</a></li>
                        <!--									<li><a href="/hakka/voice.html">语音搜索</a></li>-->
                        <!-- <li><a href="./hakka/ime/typewriting.htm">输入法</a></li> -->
                        <!--li><a href="/hakka/bbs/" target="_blank">讨论</a></li-->
                    </ul>
                </div>
            </div>
        </div>
        <div class="head_right" th:if="${session.user==null}">
            <ul class="head_right_list">
                <li><a href="/login.html">登录</a></li>
                <li class="register_btn"><a href="/register.html">注册</a></li>
                <li><a href="/logout">注销</a></li>
            </ul>
        </div>
        <div class="head_right" th:if="${session.user!=null}">
            <ul class="head_right_list">
                <li th:text="${session.user.username}" style="color: red"></li>
                <li><a href="/logout">注销</a></li>
            </ul>
        </div>
    </div>
</div>
<!--<h1 >客家博物馆音译问卷调查</h1>-->
<!-- 需要装插件的方法 -->
<!-- <embed height="100" width="100" src="/i/horse.mp3"></embed> -->
<!-- <audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
</audio> -->

<div class="banner">
    <img style="width: 100%;height: 250px;" src="/image/search/background.jpg" alt="">
</div>
<p style="text-align: center">温馨提示：您需要提交相应的音频内容才可以查看相应音频的所有提交哦~（默认可看第一个音频所有提交）</p>
<div class="container" style="text-align: center;">
    <div class="row">
        <div class="col-md-12 ">
            <table class="table table-hover " id="mp3_table">
                <thead>
                <tr class="info">
                    <th style="text-align: center ">用户名</th>
                    <th style="text-align: center ">MP3编号</th>
                    <th style="text-align: center ">提交内容</th>
                    <th style="text-align: center">支持数</th>
                    <th style="text-align: center">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <!--<%&#45;&#45;显示分页信息&#45;&#45;%>-->
    <div class="row">
        <!--    <%&#45;&#45;分页文字信息&#45;&#45;%>-->
        <div class="col-md-6" id="page_info_area"></div>
        <!--    <%&#45;&#45;分页条信息&#45;&#45;%>-->
        <div class="col-md-6" id="page_nav_area"></div>
    </div>
</div>


<!--相对底部footer-->
<script>
    var totalRecord, currentPage;
    //1、页面加载完成以后，直接发送一个ajax请求要到分页数据
    $(document).ready(function () {
        //去首页
        to_page(1);
    });

    //去到某一页
    function to_page(pn) {
        $.ajax({
            url: "mp3_id/to_answer",
            data: "pn=" + pn,
            type: "GET",
            success: function (result) {
                console.log(result.extend.pageInfo.list);
                //1、解析并显示数据
                build_mp3_table(result);
                //2、解析并显示分页的信息
                build_page_info(result);
                // 3、解析显示分页条
                build_page_nav(result);
            }
        });
    }

    /**
     * 显示表格信息
     */
    function build_mp3_table(result) {
        //清空表格
        $("#mp3_table tbody").empty();
        var mp3s = result.extend.pageInfo.list;
        $.each(mp3s, function (index, item) {

            console.log(index, item)
            // var id=item.id;
            var idTd = $("<td></td>").append(item.user.username);
            var mp3IdTd = $("<td></td>").append(item.mp3Id);
            var userAnswerTd = $("<td></td>").append(item.userAnswer);
            var love_number=$("<td></td>").append(item.love_number);
            //点赞按钮
            var butten=$("<button></button>").addClass("btn-sm btn-primary love_btn")
                .append($("<span></span>")).append("赞")
            var butten1=$("<button></button>").addClass("btn-sm btn-primary love_btn")
                .append($("<span></span>")).append("···")
            //为按钮添加自定义属性表示该条提交id
            butten.attr("love_id",item.id);
            $("<tr></tr>")
                .append(idTd)
                .append(mp3IdTd)
                .append(userAnswerTd)
                .append(love_number)
                .append(butten)
                .append(butten1)
                .appendTo("#mp3_table tbody");

        });

        $(document).on("click",".love_btn",function () {
            //获取评论id传回后台
            //接口:/mp3_id/love
            var love_id2=$(this).attr("love_id");
            console.log(love_id2);
            $.ajax({
                type:"POST",
                url:"/mp3_id/love",
                data: {"loveid":love_id2},
                success:function (result) {
                    alert(result)
                }
            })
        });
    }


    // /**
    //  * 解析显示分页信息
    //  */
    function build_page_info(result) {
        //每次查询前清空
        $("#page_info_area").empty();
        $("#page_info_area")
            .append("当前第" + result.extend.pageInfo.pageNum + "页，总" + result.extend.pageInfo.pages + "页，总" + result.extend.pageInfo.total + "条记录");
        totalRecord = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

    // /**
    //  * 解析显示分页条,点击分页要能进入下一条
    //  */
    function build_page_nav(result) {
        $("#page_nav_area").empty()
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if (result.extend.pageInfo.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页事件
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum - 1);
            });

        }

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (result.extend.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页事件
            nextPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
        }

        ul.append(firstPageLi).append(prePageLi);

        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            })
            ul.append(numLi)
        });
        ul.append(nextPageLi).append(lastPageLi);
        var navElv = $("<nav></nav>").append(ul);
        navElv.appendTo("#page_nav_area");
    }
</script>

</body>

</html>